<template>
  <n-statistic :class="size" class="x-statistic">
    <template v-if="label" #label>
      <n-space :size="4" align="center" :wrap-item="false">
        {{ label }}
        <n-tooltip v-if="help" style="max-width: 300px">
          <template #trigger>
            <n-icon size="16" :depth="4">
              <QuestionCircleFilled />
            </n-icon>
          </template>
          <span>{{ help }}</span>
        </n-tooltip>
      </n-space>
    </template>
    <slot />
  </n-statistic>
</template>

<script setup lang="ts">
  import { NStatistic, NIcon, NTooltip, NSpace } from 'naive-ui'
  import { QuestionCircleFilled } from '@vicons/antd'

  const props = defineProps({
    ...NStatistic.props,
    label: {
      type: String,
      default: ''
    },
    help: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'medium'
    }
  })
</script>

<style scoped lang="scss">
  .large {
    :deep(.n-statistic__label) {
      font-size: 16px;
      color: #444444;
      font-weight: 500;
    }
    :deep(.n-statistic-value .n-statistic-value__content) {
      font-size: 24px;
      font-weight: 500;
    }
  }
</style>
